<template>
  <div class="softwareDetailInfo">
    <div
      class="co-page-banner-section section"
      data-page-title="about us"
      style="background-image: url(img/page-banner-bg.jpg)"
    >
      <div class="container-fluid">
        <div class="row">
          <div class="co-page-banner text-center col-xs-12">
            <h1>{{ dataEntity.title }}</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <el-divider content-position="center">{{ dataEntity.title }}</el-divider>
      <div class="content">
        <div class="img">
          <img :src="dataEntity.imgUrl" :alt="dataEntity.title" />
        </div>
        <div class="info">{{ dataEntity.content }}</div>
      </div>
      <el-divider content-position="center">产品详情</el-divider>
      <div class="detail" v-html="dataEntity.detail"></div>
    </div>
  </div>
</template>
<script>
import { softwareDataList } from "../../public/data.js";
export default {
  name: "softwareDetailInfo",
  props: {},
  data() {
    return {
      dataEntity: {},
    };
  },
  // 注册组件
  components: {},
  methods: {
    init() {},
  },
  created() {
    debugger;
    var id = this.$route.query.id;
    softwareDataList.map((item) => {
      if ((item.id == id)) {
        this.dataEntity = item;
      }
    });
    // 监听
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
};
</script>

<style lang="scss">
.softwareDetailInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  width: 100%;
  .foot {
    width: 100%;
    align-items: center;
    justify-items: center;
    margin-top: 50px;
    h2{font-weight: 400;}
    .content {
      display: flex;
      flex-direction: row;
    img{
      width: 400px;
      height: 400px;
    }
    }
  }
}
</style>
